<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>
            <a href="/">爱吃兔溯源</a>
          </el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="finddata" class="demo-form-inline">
          <el-form-item label="产品名称">
            <el-input v-model="finddata.GoodsName" placeholder="请输入产品名称" clearable />
          </el-form-item>
          <el-form-item label="生产批次">
            <el-input v-model="finddata.CreateBatch" placeholder="请输入生产批次" clearable />
          </el-form-item>
          <el-form-item label="保质期">
            <el-input v-model="finddata.ExpireTime" placeholder="请输入保质期" clearable />
          </el-form-item>
          <el-form-item label="成产许可证号">
            <el-input v-model="finddata.CreateCode" placeholder="请输入成产许可证号" clearable />
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input v-model="finddata.CreateCompany" placeholder="请输入企业名称" clearable />
          </el-form-item>
          <el-form-item>
            <!-- {{ finddata }} -->
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-button type="primary" @click="GetGoods()">查询</el-button>
        <el-button type="primary" @click="GoodsAddBegin()">商品新增</el-button>
        <el-button type="primary" @click="Baidu()">百度一下,你就知道</el-button>
        <el-button type="primary" @click="Createimg()">二维码生成</el-button>
        <el-button type="primary" @click="OpenFileget = true">导出</el-button>
        <!-- 列表 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" prop="date" label="序号" width="80" />
          <el-table-column prop="GoodsName" label="产品名称" width="120" />
          <el-table-column prop="CreateBatch" label="生产批次" width="120" />
          <el-table-column prop="ExpireTime" label="保质期" width="120" />
          <el-table-column prop="CreateCode" label="成产许可证号" width="190" />
          <el-table-column prop="CreateCompany" label="企业" width="180" />
          <el-table-column prop="Covers" label="封面" width="120">
            <template v-slot="scope">
              <img :src="scope.row.Covers" width="40px" height="40px" style="align-content: center;">
            </template>
          </el-table-column>
          <el-table-column prop="Tests" label="检验报告" width="120">
            <template v-slot="scope">
              <img :src="scope.row.Tests" width="40px" height="40px" style="align-content: center;">
            </template>
          </el-table-column>
          <el-table-column prop="Proportion" label="完成度" width="180" />
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scoped">
              <el-button link type="primary" size="small" @click="Delway(scoped.row)">删除</el-button>
              <el-button link type="primary" size="small" @click="OpenUpdateway(scoped.row)">编辑</el-button>
              <el-button link type="primary" size="small" @click="Descway(scoped.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <table>
          <tbody>
            <tr>
              <td>
                <el-pagination v-model:current-page="page.pageindex" v-model:page-size="page.pagesize"
                  :page-sizes="[2, 4, 6, 8]" layout="total, sizes, prev, pager, next, jumper" prev-text="上一页"
                  next-text="下一页" :total=page.totalcount />
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 新增 -->
        <el-dialog v-model="OpenGoodsAdd" title="基本信息" width="500">
          {{ GoodsAddData }}
          <!-- 还差图片,先去写配置文件了  先整单图吧-->

          <el-form ref="ruleFormRef" style="max-width: 600px" :model="GoodsAddData" label-width="auto">

            <el-form-item label="商品名称" prop="region">
              <el-select v-model="GoodsAddData.GoodsName" placeholder="请输入商品名称">
                <el-option label="兔头(麻辣)" value="兔头(麻辣)" />
                <el-option label="兔头(酸辣)" value="兔头(酸辣)" />
                <el-option label="兔肉丝" value="兔肉丝" />
                <el-option label="兔肉丁" value="兔肉丁" />
                <el-option label="请选择" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="生产批次" prop="CreateBatch">
              <el-input v-model="GoodsAddData.CreateBatch" disabled:true />
            </el-form-item>
            <el-form-item label="保质期" prop="ExpireTime">
              <el-input v-model="GoodsAddData.ExpireTime" />
            </el-form-item>
            <el-form-item label="生产许可证号" prop="CreateCode">
              <el-input v-model="GoodsAddData.CreateCode" disabled:true />
            </el-form-item>
            <el-form-item label="生产企业" prop="CreateCompany">
              <el-input v-model="GoodsAddData.CreateCompany" />
            </el-form-item>
            <el-form-item label="封面" prop="Covers">
              <el-upload class="avatar-uploader" action="http://localhost:5048/api/Uploads/Loadway"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="GoodsAddData.Covers" :src="GoodsAddData.Covers" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="检验报告" prop="Tests">
              <el-upload class="avatar-uploader" action="http://localhost:5048/api/Uploads/Loadway"
                :show-file-list="false" :on-success="TestImg" :before-upload="beforeAvatarUpload">
                <img v-if="GoodsAddData.Tests" :src="GoodsAddData.Tests" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog v-model="OpenGoodsUpdate" title="基本信息编辑" width="500">
          <!--   先整单图吧-->
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="GoodsAddData" label-width="auto">
            <el-form-item label="商品名称" prop="region">
              <el-select v-model="GoodsAddData.GoodsName" placeholder="请输入商品名称">
                <el-option label="兔头(麻辣)" value="兔头(麻辣)" />
                <el-option label="兔头(酸辣)" value="兔头(酸辣)" />
                <el-option label="兔肉丝" value="兔肉丝" />
                <el-option label="兔肉丁" value="兔肉丁" />
              </el-select>
            </el-form-item>
            <el-form-item label="生产批次" prop="CreateBatch">
              <el-input v-model="GoodsAddData.CreateBatch" disabled:true />
            </el-form-item>
            <el-form-item label="保质期" prop="ExpireTime">
              <el-input v-model="GoodsAddData.ExpireTime" />
            </el-form-item>
            <el-form-item label="生产许可证号" prop="CreateCode">
              <el-input v-model="GoodsAddData.CreateCode" disabled:true />
            </el-form-item>
            <el-form-item label="生产企业" prop="CreateCompany">
              <el-input v-model="GoodsAddData.CreateCompany" />
            </el-form-item>
            <el-form-item label="封面" prop="Covers">
              <el-upload class="avatar-uploader" action="http://localhost:5048/api/Uploads/Loadway"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="GoodsAddData.Covers" :src="GoodsAddData.Covers" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="检验报告" prop="Tests">
              <el-upload class="avatar-uploader" action="http://localhost:5048/api/Uploads/Loadway"
                :show-file-list="false" :on-success="TestImg" :before-upload="beforeAvatarUpload">
                <img v-if="GoodsAddData.Tests" :src="GoodsAddData.Tests" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="Updateway()">
                保存
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-main>
    </el-container>













    <!-- 导出 -->
    <el-dialog v-model="OpenFileget" title="导出设置" width="500">
      <el-form :model="GoodsAddData" label-width="auto" style="max-width: 600px">
        <el-form-item label="数量">
          <el-input v-model="GoodsAddData.numbers" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="GetFile()">导出</el-button>
          <el-button @click="OpenFileget = false">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>








  </div>
</template>
<script lang="ts" setup>
import axios from 'axios'
import moment from 'moment';
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { fa, id } from 'element-plus/es/locales.mjs';
import { assert } from '@vue/compiler-core';
import router from '@/router';
//其他官方网站跳转
const Baidu = () => {
  window.location.href = "https://www.baidu.com"
}
const Createimg = () => {
  window.location.href = "https://tool.hprt.com.cn/ErWeiMa"
}

const ruleFormRef = ref<FormInstance>()
onMounted(() => {
  GetGoods();
})
//分页查询参数
const page = reactive({
  "pageindex": 1,
  "pagesize": 4,
  totalcount: 0,

})
const finddata = reactive({
  GoodsName: "",
  CreateBatch: "",
  ExpireTime: null,
  CreateCode: "",
  CreateCompany: ""
})
//显示数据
const tableData = ref([]);
//显示方法
const GetGoods = () => {
  debugger
  axios.get("/api/Goods/GoodsGet", {
    params: {
      GoodsName: finddata.GoodsName,
      CreateBatch: finddata.CreateBatch,
      ExpireTime: finddata.ExpireTime,
      CreateCode: finddata.CreateCode,
      CreateCompany: finddata.CreateCompany,
      pageindex: page.pageindex,
      pagesize: page.pagesize
    }

  }).then(res => {
    console.log(res.data);
    tableData.value = res.data.DataPage;
    page.totalcount = res.data.Totalcount;
  })
}
//侦听器
watch(page, () => {
  GetGoods();
})
//打开商品新增
const OpenGoodsAdd = ref(false);
const GoodsAddData = reactive({
  "GoodsName": "",
  "ExpireTime": null,
  "CreateCompany": "",
  "Covers": "",
  "Tests": "",
  Proportion: "0%",
  CreateBatch: "",
  CreateCode: "",
  BreedId: 1,
  KillId: 1,
  FinishStepId: 1,
  numbers: null
})
const GoodsAddBegin = () => {
  OpenGoodsAdd.value = true;
  const datetime = new Date();
  const datetimetype = moment(datetime).format("yyyyMMDD").toString();  //生产批次
  GoodsAddData.CreateBatch = datetimetype;
  var Code = "SC";  //生产许可证号
  var i: any = ref(0);
  for (i = 0; i < 14; i++) {
    Code += Math.floor(10 * Math.random()).toString();
  }
  GoodsAddData.CreateCode = Code;
}
//校验
// const rules = reactive<FormRules>({
//   GoodsName: [
//     { required: true, message: '请输入商品名称', trigger: 'blur' },
//   ],
//   ExpireTime: [
//     { required: true, message: '请输入过期时间', trigger: 'blur' },
//   ],
//   CreateCompany: [
//     { required: true, message: '请输入生产企业', trigger: 'blur' },
//   ],
//   Covers: [
//     { required: true, message: '请选择商品封面', trigger: 'blur' },
//   ],

//   Tests: [
//     { required: true, message: '请选择商品检验表单', trigger: 'blur' },
//   ],
//   CreateBatch: [
//     { required: true, message: '请输入生产批次', trigger: 'blur' },
//   ],
//   CreateCode: [
//     { required: true, message: '请输入生产许可证号', trigger: 'blur' },
//   ],
// })
//添加商品
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post("/api/Goods/GoodsAdd", GoodsAddData).then(res => {
        console.log(res.data)
        if (res.data.Num == 200) {
          debugger
          ElMessage.success(res.data.Message);
          OpenGoodsAdd.value = false;
          GetGoods();
        }
        else {
          ElMessage.error(res.data.Message);
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//封面图片上传
const handleAvatarSuccess = (
  ImgPath: any
) => {
  GoodsAddData.Covers = ImgPath
  //ElMessage.success(GoodsAddData.Covers);
}
//检验图片上传
const TestImg = (
  ImgPath: any
) => {
  GoodsAddData.Tests = ImgPath
  // ElMessage.success(GoodsAddData.Tests);
}
//验证图片格式大小
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/gif' && rawFile.type !== 'image/png') {
    ElMessage.error('图片格式不正确!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}
//单删
const Delway = (Row: any) => {
  ElMessageBox.confirm(
    '确认删除商品信息吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete("/api/Goods/GoodsDel", { params: { Id: Row.Id } }).then(res => {
        console.log();
        if (res.data.Num == 200) {
          ElMessage.success(res.data.Message);

          GetGoods();
        }
        else {
          ElMessage.error(res.data.Message);
        }
      })
    })
}
//商品编辑
const OpenGoodsUpdate = ref(false)
const Id = ref(0)
const OpenUpdateway = (row: any) => {
  OpenGoodsUpdate.value = true;
  Id.value = row.Id;  //主键
  GoodsAddData.GoodsName = row.GoodsName;
  GoodsAddData.ExpireTime = row.ExpireTime;
  GoodsAddData.CreateCompany = row.CreateCompany;
  GoodsAddData.CreateBatch = row.CreateBatch;
  GoodsAddData.CreateCode = row.CreateCode;
  GoodsAddData.Covers = row.Covers;
  GoodsAddData.Tests = row.Tests;
}
//修改
const Updateway = () => {
  axios.put("/api/Goods/GoodsUpdate", {
    "Id": Id.value,
    "GoodsName": GoodsAddData.GoodsName,
    "CreateBatch": GoodsAddData.CreateBatch,
    "ExpireTime": GoodsAddData.ExpireTime,
    "CreateCode": GoodsAddData.CreateCode,
    "CreateCompany": GoodsAddData.CreateCompany,
    "Covers": GoodsAddData.Covers,
    "Tests": GoodsAddData.Tests,
    BreedId: 1,
    KillId: 1,
    FinishStepId: 1

  }).then(res => {
    console.log(res.data);
    if (res.data.Num == 200) {
      ElMessage.success(res.data.Message);
      OpenGoodsUpdate.value = false;
      GetGoods();
    }
    else {
      ElMessage.error(res.data.Message);
    }
  })
}
//详情跳转
const Descway = (Data: any) => {
  router.push({
    path: "/FindRoot",
    query: {
      Id: Data.Id
    },
  })
}
//导出开关
const OpenFileget = ref(false)
const GetFile = () => {
  console.log(GoodsAddData.numbers);

  location.href = "http://localhost:5048/api/Exports/GetExcelFile?number=" + GoodsAddData.numbers;
}





</script>

<style scoped>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>